<template>
    <div class="pay">
        <div class="content">
            <van-icon name="checked" color="#e93323"/>
            <div class="con">
                <div class="t">订单支付成功</div>
                <div class="m">
                    <ul>
                        <li>
                            <span>订单编号</span>
                            <span>{{orderStr}}</span>
                        </li>
                        <li>
                            <span>下单时间</span>
                            <span>{{cTime|formatTime}}</span>
                        </li>
                        <li>
                            <span>支付方式</span>
                            <span>余额支付</span>
                        </li>
                        <li>
                            <span>支付金额</span>
                            <span>{{sumPrice}}</span>
                        </li>
                    </ul>
                </div>
                <div class="b">
                    <p>
                        <van-button type="danger" @click="goDispatching"  round >查看订单</van-button>
                    </p>
                    <p>
                        <van-button color="#ee0a24" @click="goIndex" round  plain>返回首页</van-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex';
export default {
    computed:{
        ...mapGetters(['getOrderList','getShopList','getPayShop'])
    },
    data(){
        return{
            sumPrice:0,
            cTime:0,
            orderStr:'',
        }
    },
    created(){
        if(this.getOrderList&&this.getOrderList.length > 0){
            this.$toast.success('支付成功');
            let sum = 0;
            this.getOrderList.map(item=>{
                sum += item.num*parseFloat(item.price);
            })
            this.sumPrice = sum.toFixed(2);
            let time = new Date().getTime();
            this.cTime = time;
            this.randomNum();
            this.createPayShop();
        }
    },
    filters:{
        formatTime(val){
            // console.log(val);
            let date = new Date(val);
            let YY = date.getFullYear() + '-';
            let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return YY + MM + DD +" "+hh + mm + ss;
        },
    },
    mounted(){
        if(this.getOrderList && this.getOrderList.length > 0){
            if(this.getShopList && this.getShopList.length > 0){
                let arr = [];
                this.getShopList.forEach(item1 => {
                    this.getOrderList.forEach(item2 => {
                        if(item1 != item2){
                            arr.push(item1);
                        }
                    })
                })
                // console.log(arr);
                this.clearBuyShop();
                this.changeBuyShop(arr);
                this.clearOrderShop();
            }
        }
    },
    methods:{
        ...mapMutations(['clearOrderShop','changeBuyShop','clearBuyShop','changePayShop']),
        randomNum(){
            let arr = [
                'Q','W','E','R','T','Y','U','I','O','P',
                'A','S','D','F','G','H','J','K','L',
                'Z','X','C','V','B','N','M'
            ];
            let str1 = arr[Math.floor(Math.random()*25)];
            let str2 = arr[Math.floor(Math.random()*25)];
            let str3 = '';
            for(let i = 0; i < 16; i++){
                str3 += Math.floor(Math.random()*10);
            }
            this.orderStr = str1 + str2 +str3;
            // this.clearOrderShop();
        },
        createPayShop(){
            let obj = {
                id : this.orderStr,
                list : this.getOrderList,
                sumPrice : this.sumPrice,
                time: this.cTime,
            };
            this.changePayShop(obj);
        },
        goIndex(){
            this.$router.push('/');
        },
        goDispatching(){
            this.$router.push('/dispatching');
        },
    },
}
</script>

<style lang="less">
.pay{
    font-size: 16px;
    .content{
        min-height: 100vh;
        background-color: #f5f5f5;
        position: relative;
        border: solid 1px #f5f5f5;
        i{
            position: absolute;
            font-size: 50px;
            // border: solid 1px red;
            left: calc(~"50% - 25px");
            top: 50px;
        }
        .con{
            background-color: white;
            height: 350px;
            width: 330px;
            margin:75px auto;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 6px;
            // padding-top: 40px;
            .t{
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                border-bottom: solid 1px #f5f5f5;
                padding: 20px 0;
            }
            .m{
                margin-top: 10px;
                padding-bottom: 10px;
                border-bottom: solid 1px #f5f5f5;
                ul{
                    li{
                        display: flex;
                        justify-content: space-between;
                        margin: 10px 0;
                        span{
                            &:nth-child(2){
                                font-size: 15px;
                                color: #6f7b8b;
                            }
                        }
                    }
                }
            }
            .b{
                margin-top: 10px;
                p{
                    margin: 10px 0;
                    .van-button{
                        width: 310px;
                    }
                }
            }
        }
    }
}
</style>